// 探索 JSX 静态化提高性能的方法
// 研究 JSX 返回对象结构，深入了解 react 内部设计

import React, { useMemo } from 'react';

function ReturnFragmentComponent() {
  const result = (
    <>
      <h2>fragment1</h2>
      <h2>fragment2</h2>
    </>
  );
  console.log('ReturnFragmentComponent', result);
  return result;
}

function ReturnArrayComponent() {
  const result = [
    <h2 key="1">item1</h2>,
    <h2 key="2">item2</h2>,
  ];
  console.log('ReturnArrayComponent', result);
  return result;
}

function ReturnCreateElement(props: { [key: string]: any }) {
  return React.createElement('div', null, `Hello ${props.toWhat}`);
}

const staticVdom = (<h2>header</h2>);

// 即便组件没有参数调节，也推荐返回 static 内容，因为从发展的角度，未来内容需要根据参数条件，使用的代码已经采用组件方式引用了
// 参数可以设定默认值来保持原来无参数的样子，平滑过渡到使用参数的阶段。
function Comp1() {
  return staticVdom;
}

export default function TestJSX() {

  // static2 相当于 Comp1 起到的缓存 vdom 的作用
  const static2 = useMemo(() => staticVdom, []);
  console.log('staticVdom', staticVdom);

  return (
    <div>
      <h1>Page JSX</h1>
      <ReturnFragmentComponent />
      {ReturnArrayComponent()}
      <ReturnCreateElement />
      <Comp1 />
      <Comp1 />
      {staticVdom}
      {staticVdom}
      {static2}
      {static2}
    </div>
  );
}
